<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="title">实名认证</text>
			<text class="subtitle">请完成人脸识别进行身份验证</text>
		</view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 人脸识别 -->
			<view class="form-item">
				<text class="label">人脸识别</text>
				<view class="face-section">
					<view v-if="!faceImage" class="face-upload" @tap="startFaceRecognition">
						<uni-icons type="camera" size="40" color="#007AFF" />
						<text class="upload-text">点击进行人脸识别</text>
						<text class="upload-hint">请确保光线充足，面部清晰</text>
					</view>
					<view v-else class="face-preview">
						<image class="face-image" :src="faceImage" mode="aspectFill" />
						<view class="face-actions">
							<uni-button size="mini" type="default" @tap="retakePhoto">重新拍摄</uni-button>
							<uni-button size="mini" type="primary" @tap="startFaceRecognition">重新识别</uni-button>
						</view>
					</view>
				</view>
			</view>

			<!-- 认证状态 -->
			<view v-if="verifyStatus" class="status-section">
				<view class="status-item" :class="{ success: verifyStatus.faceVerified, error: !verifyStatus.faceVerified }">
					<uni-icons :type="verifyStatus.faceVerified ? 'checkmarkempty' : 'close'" size="16" 
						:color="verifyStatus.faceVerified ? '#52c41a' : '#ff4d4f'" />
					<text class="status-text">人脸识别{{ verifyStatus.faceVerified ? '通过' : '未通过' }}</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<uni-button 
				type="primary" 
				:disabled="!canSubmit" 
				@tap="submitVerification"
				class="submit-btn"
			>
				{{ submitText }}
			</uni-button>
		</view>

		<!-- 提示信息 -->
		<view class="tips">
			<text class="tips-title">认证说明：</text>
			<text class="tips-item">• 人脸识别时请保持面部清晰，避免遮挡</text>
			<text class="tips-item">• 请确保光线充足，正面面对摄像头</text>
			<text class="tips-item">• 认证信息仅用于身份验证，我们将严格保护您的隐私</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 人脸识别图片
			faceImage: '',
			// 认证状态
			verifyStatus: null,
			// 提交状态
			isSubmitting: false
		}
	},
	computed: {
		// 是否可以提交
		canSubmit() {
			return this.faceImage && this.verifyStatus && this.verifyStatus.faceVerified && !this.isSubmitting;
		},
		// 提交按钮文本
		submitText() {
			if (this.isSubmitting) return '提交中...';
			if (!this.faceImage) return '请先进行人脸识别';
			if (!this.verifyStatus || !this.verifyStatus.faceVerified) return '人脸识别未通过';
			return '提交认证';
		}
	},
	methods: {
		// 开始人脸识别
		startFaceRecognition() {
			console.log('开始人脸识别');
			
			// 模拟人脸识别过程
			uni.showLoading({ title: '正在识别...' });
			
			// 这里应该调用实际的人脸识别API
			setTimeout(() => {
				uni.hideLoading();
				
				// 模拟识别结果
				this.faceImage = '/static/weix.png'; // 临时使用现有图片
				this.verifyStatus = {
					faceVerified: true
				};
				
				uni.showToast({
					title: '人脸识别成功',
					icon: 'success'
				});
			}, 2000);
		},

		// 重新拍照
		retakePhoto() {
			this.faceImage = '';
			this.verifyStatus = null;
		},

		// 提交认证
		submitVerification() {
			if (!this.canSubmit) return;
			
			console.log('提交实名认证');
			this.isSubmitting = true;
			
			// 这里应该调用后端认证接口
			uni.request({
				url: '/api/user/verify',
				method: 'POST',
				data: {
					faceImage: this.faceImage,
					verifyStatus: this.verifyStatus
				},
				success: (res) => {
					if (res.data && res.data.success) {
						uni.showToast({
							title: '认证提交成功',
							icon: 'success'
						});
						
						// 跳转回上一页或首页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.data?.message || '认证失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				},
				complete: () => {
					this.isSubmitting = false;
				}
			});
		}
	}
}
</script>

<style>
	page {
		background-color: #f5f6fa;
	}

	.container {
		padding: 30rpx;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		display: block;
		font-size: 28px;
		font-weight: 700;
		color: #333;
		margin-bottom: 16rpx;
	}

	.subtitle {
		display: block;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.form-content {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.label {
		display: block;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.face-section {
		border: 2rpx dashed #d9d9d9;
		border-radius: 12rpx;
		overflow: hidden;
		transition: border-color 0.3s ease;
	}

	.face-upload {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		text-align: center;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.face-upload:active {
		background-color: #f8f9fa;
	}

	.upload-text {
		font-size: 16px;
		color: #333;
		margin: 20rpx 0 10rpx;
	}

	.upload-hint {
		font-size: 12px;
		color: #999;
		line-height: 1.4;
	}

	.face-preview {
		position: relative;
	}

	.face-image {
		width: 100%;
		height: 400rpx;
		border-radius: 12rpx;
	}

	.face-actions {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		padding: 20rpx;
		background: #f8f9fa;
	}

	.status-section {
		margin-top: 30rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.status-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 16rpx 0;
	}

	.status-item.success {
		color: #52c41a;
	}

	.status-item.error {
		color: #ff4d4f;
	}

	.status-text {
		font-size: 14px;
		font-weight: 500;
	}

	.submit-section {
		margin-bottom: 30rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 18px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.submit-btn:disabled {
		opacity: 0.6;
	}

	.tips {
		background: #f8f9ff;
		border: 2rpx solid #e6f7ff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.tips-title {
		display: block;
		font-size: 16px;
		font-weight: 600;
		color: #1890ff;
		margin-bottom: 20rpx;
	}

	.tips-item {
		display: block;
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 12rpx;
	}

	.tips-item:last-child {
		margin-bottom: 0;
	}
</style>